<template>
  <div class="exam">
    <div class="item" v-for="item in list" :key="item.paper_id">
      <el-tag class="type" effect="dark" size="mini">考试</el-tag>
      <div class="title" :class="can_exam === 0 || item.can_exam === 0 ? 'gray' : 'black'">
        {{ item.paper_title }}
      </div>
      <el-button
        type="primary"
        size="small"
        round
        :class="{ 'is-disabled': can_exam === 0 || item.can_exam === 0 }"
        @click="examframed(item)"
        >开始考试</el-button
      >
    </div>
    <edu-no-data :image="false" text="暂时还没有考试哦~" v-if="list.length === 0"></edu-no-data>

    <!-- 人脸验证 -->
    <EduFaceVerify
      v-if="faceVisible"
      :visible.sync="faceVisible"
      scene_key="exam"
      :scene_id="faceData.paper_id || 0"
      scene_type="1"
      @cancel="handleFace"
    ></EduFaceVerify>
  </div>
</template>

<script>
import EduNoData from '@/components/EduNoData'
export default {
  props: {
    // 考试数据列表
    list: {
      type: Array,
      default: () => []
    },
    // 课程id
    course_id: Number,
    // 是否可以考试
    can_exam: Number
  },
  components: {
    EduNoData
  },
  methods: {
    // 开始考试
    examframed(item) {
      if (this.can_exam === 0) return this.$message.info('不符合参考条件')
      if (item.can_exam === 0) return this.$message.info('考试次数已用完')
      // 是否需要人脸识别
      this.jump(item)
    },
    jump(item) {
      this.$router.push({
        path: '/exam/paper/topic',
        query: {
          id: item.paper_id,
          cid: this.course_id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.exam {
  padding-right: 25px;
  padding-bottom: 20px;
  .item {
    padding-left: 28px;
    height: 56px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid $border-color-divider;
    transition: all 0.1s;
    .title {
      margin-left: 12px;
      font-size: 14px;
      font-weight: 400;
      max-width: 580px;
      @include ellipsis();
    }
    .black {
      color: $text-color-secondary;
    }
    .gray {
      color: $text-color-auxiliary;
    }
    .el-button {
      margin-left: auto;
      opacity: 0;
      transition: all 0.1s;
      &.is-disabled {
        cursor: pointer;
      }
    }
    .type {
      color: #6e6e6e;
      background-color: #f1f1f1;
      border-color: #f1f1f1;
      transition: all 0.1s;
    }
  }
  .item:hover {
    background: rgba(81, 145, 255, 0.05);
    .el-button {
      opacity: 1;
    }
    .type {
      color: #ffffff;
      @include edu-color-primary(background-color);
      @include edu-color-primary(border-color);
    }
  }
}
</style>
